<template>
  <div v-if="cDetails">
    <el-drawer
      :title="detailsData.name"
      :visible.sync="cDetails"
      direction="rtl"
      :close-on-press-escape="false"
      :wrapperClosable="false"
    >
      <div class="drawer_pad">
        <div class="top_data">
          <table style="font-size: 12px; white-space: nowrap">
            <tr style="color: #75829e">
              <td style="width: 200px"><span>群主</span></td>
              <td style="width: 100px"><span>群成员</span></td>
              <td style="width: 100px"><span>关联企业</span></td>
              <td style="width: 100px"><span>群角色</span></td>
              <td style="width: 100px"><span>跟进状态</span></td>
              <td style="width: 100px"><span>群类型</span></td>
              <td style="width: 100px"><span>群状态</span></td>
            </tr>
            <tr>
              <td>{{owner_user !==""?owner_user:'--'}}</td>
              <td>{{count}}人</td>
              <td>未关联</td>
              <td>--</td>
              <td>
                <span v-if="detailsData.status == '0'">跟进人正常</span>
                <span v-else-if="detailsData.status == '1'">跟进人离职</span>
                <span v-else-if="detailsData.status == '2'">离职继承中</span>
                <span v-else-if="detailsData.status == '3'">离职继承完成</span>
                <span v-else>--</span>
              </td>
              <td>
                <span v-if="detailsData.type == '1'">售前</span>
                <span v-else-if="detailsData.type == '2'">售后</span>
                <span v-else>--</span>
              </td>
              <td>
                <span v-if="detailsData.state == '1'">未解散</span>
                <span v-else-if="detailsData.state == '2'">已解散</span>
                <span v-else>--</span>
              </td>
            </tr>
          </table>
        </div>
        <div class="bottom_tab">
          <h5>群成员</h5>
          <el-table
            v-loading="loading"
            ref="multipleTable"
            :data="detailsData.member"
            tooltip-effect="dark"
            style="width: 100%"
            class="ellipsis"
          >
            <el-table-column label="成员名称" fixed="left">
              <template slot-scope="scope">
                  <span :title="scope.row.name">{{
                    scope.row.name !== ""
                      ? scope.row.name: "--"
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column label="组名称">
              <template slot-scope="scope">
                <span :title="scope.row.group_nickname">{{
                  scope.row.group_nickname !== "" ? scope.row.group_nickname : "--"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column width="100" label="成员类型">
              <template slot-scope="scope">
                <span v-if="scope.row.type==1">企业成员</span>
                <span v-else-if="scope.row.type==2">外部联系人</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column width="150" label="加入时间">
              <template slot-scope="scope">
                <span>{{scope.row.join_time}}</span>
              </template>
            </el-table-column>
            <el-table-column width="150" label="加入方式">
              <template slot-scope="scope">
                <span v-if="scope.row.join_scene==1">直接邀请入群</span>
                <span v-else-if="scope.row.join_scene==2">通过扫描群二维码入群</span>
                <span v-else-if="scope.row.join_scene==3">通过邀请链接入群</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column width="50" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.join_time == 1">退群</span>
                <span v-else-if="scope.row.join_time == 2">在群</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="footer">
            <span style="margin-right: 10px">共{{ count }}条</span>
            <!-- <span>当前第{{ searchList.page }}页共有{{ tableData.length }}条</span> -->
            <span :class="searchList.page == 1 ? 'ban_btn_no' : ''">
              <i
                class="el-icon-arrow-left operable"
                :class="searchList.page == 1 ? 'pageOff' : 'pageOn'"
                @click="prevPage"
              ></i>
            </span>
            <div style="display: inline; margin: 0 10px">
              <el-input
                :title="searchList.page"
                style="width: 60px"
                v-model="searchList.page"
                @change="sizechange()"
                size="mini"
              ></el-input>
              <span style="margin: 0 5px 0 15px">/</span>
              <span>{{ pagenumber == 0 ? "1" : pagenumber }}</span>
            </div>
            <span :class="seenumber > count ? 'ban_btn_no' : ''">
              <i
                class="el-icon-arrow-right operable"
                :class="seenumber > count ? 'pageOff' : 'pageOn'"
                @click="nextPage"
              ></i>
            </span>
            <span style="margin-left: 10px">每页</span>
            <el-select
              style="width: 70px"
              v-model="searchList.size"
              @change="sizechange()"
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="item in sizennList"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
            条
          </div>
        </div>
        
        <!-- <div class="survey">
            <div class="su1">
                <h5>数据概况</h5>
            </div>
            <div class="su1">
                <h5>群SOP</h5>
            </div>
            <div class="su1">
                <h5>群公告</h5>
            </div>
        </div>
        <h5>群任务<i class="el-icon-arrow-right"></i></h5>
        <el-tabs v-model="activeName">
          <el-tab-pane label="群数据" name="data">
            <el-date-picker
            v-model="grouptime"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
            <el-tabs v-model="activeData">
                <el-tab-pane label="群人数" name="people"></el-tab-pane>
                <el-tab-pane label="入群人数" name="groupingpeople"></el-tab-pane>
                <el-tab-pane label="邀请入群人数" name="invitationpeople"></el-tab-pane>
                <el-tab-pane label="退群人数" name="grouppeople"></el-tab-pane>
                <el-tab-pane label="净增人数" name="growthpeople"></el-tab-pane>
                <el-tab-pane label="消息数" name="newspeople"></el-tab-pane>
                <el-tab-pane label="发言人数" name="speakpeople"></el-tab-pane>
                <el-tab-pane label="群高频词" name="High"></el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane label="群成员" name="member">
          </el-tab-pane>
            <el-tab-pane label="聊天记录" name="record">
                聊天记录
            </el-tab-pane>
        </el-tabs> -->
      </div>
    </el-drawer>
  </div>
  </div>
</template>

<script>
export default {
  name: "detailsEnterprise",
  props: ["parentdetails", "isreturn","owner_user"],
  data() {
    return {
      loading: false,
      sizennList: [{ value: 20 }, { value: 50 }, { value: 100 }],
      seenumber: "0",
      pagenumber: "0",
      // 企业操作
      count: 0, // 群人数
      dialogEditer: false,
      cDetails: false,
      grouptime: "", // 群数据-时间选择
      data: [],
      activeName: "data",
      activeData: "people",
      detailsId: "", // 详情id
      detailsData: [],
      searchList: {
        chat_id: "",
        page: 1,
        size: "20",
      },
    };
  },
  watch: {
    cDetails(newData, oldData) {
      if (newData) {
        this.loading = true;
        this.searchList.chat_id = this.parentdetails;
        this.getenterprise();
      }
    },
  },
  created() {},
  methods: {
    // 查看客户群详情
    getenterprise() {
      console.log(this.searchList);
      this.$cmsapi.groupchatMember(this.searchList).then(
        (res) => {
          if (res.code == 0) {
            this.count = res.count;
            for (let i = 0; i < res.data.length; i++) {
              for (const key in res.data[i]) {
                if (!res.data[i][key] && res.data[i][key] !== 0) {
                  res.data[i][key] = "";
                }
              }
            }
            if (res.count > 0) {
              this.seenumber = this.searchList.size * this.searchList.page;
              this.pagenumber = Math.ceil(res.count / this.searchList.size);
            }
            this.detailsData = res.data;
            this.loading = false;
          } else {
            this.$message.error(res.msg);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 最大条数变化
    sizechange() {
      this.loading = true;
      this.getenterprise();
    },
    //上一页
    prevPage() {
      this.loading = true;
      this.searchList.page -= 1;
      this.getenterprise();
    }, // 下一页
    nextPage() {
      this.loading = true;
      this.searchList.page += 1;
      this.getenterprise();
    },
  },
};
</script>

<style scoped>
/deep/ .el-drawer__header {
  margin-bottom: 20px !important;
}
.top_data {
  background-color: #f8f9fa;
  padding: 15px;
  margin-top: 0px;
  border-radius: 10px;
  border: 1px solid #f0f0f4;
}
h6 {
  background: #f8f9fa;
  line-height: 25px;
  padding: 10px;
  margin: 10px 0 !important;
}
/* 表格最大高度 */
.drawer_pad {
  display: flex;
  flex-direction: column;
  height: -webkit-fill-available;
}
.bottom_tab {
  height: inherit;
  display: flex;
  flex-direction: column;
}
/* 群状况 */
.survey {
  display: flex;
}
.su1 {
  flex-grow: 1;
}
</style>>